<template>
  <div style="overflow: hidden;height:calc(100% - 38px)">
    <!-- <div class="jurisdictionItem">
			<div class="jurisdictionTitle">系统权限</div>
			<multipleSelection ref="pcmSelection" :dataList="pcmRightList" style="height: 320px;" :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
		</div> -->
    <div class="jurisdictionItem">
      <div class="jurisdictionTitle">WEB权限</div>
      <multipleSelection ref="menuSelection" :dataList="menuRightList" style="height: calc(100% - 45px);"
        :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
    </div>
    <!-- v-show="false" -->
    <div class="jurisdictionItem">
      <div class="jurisdictionTitle">APP权限</div>
      <multipleSelection ref="appSelection" :dataList="appRightList" style="height: calc(100% - 45px);"
        :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
    </div>
    <!--  -->
    <div class="jurisdictionItem">
      <div class="jurisdictionTitle">MINI权限</div>
      <!-- :recurList='recurMiniRightList' -->
      <multipleSelection ref="miniSelection" :dataList="miniRightList" style="height: calc(100% - 45px);"
        :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
    </div>
  </div>
</template>

<script>
  import multipleSelection from '@/components/module/selection/base/multipleSelection.vue'
  import userManagerStore from '@/page/userManager/userManagerStore.js'
  export default {
    components: {
      multipleSelection,
    },
    props: {

    },
    data () {
      return {
        selectionType: 'multiple',
        // pcmRightList: undefined,
        // menuRightList:[],
        // appRightList:[],
        recurMiniRightList: [], //转化后
      }
    },
    created () {
      //  menuApi.getAllRight(this.$store.userStore.state.nowUserInfo.userId, res => {
      // 	this.menuRightList = res.menuRight
      // 	console.log("kdankj",res);
      // 	this.appRightList = res.appRight
      //  })
    },
    mounted () {
      this.coverCheckedIds()

    },
    destroyed () {

    },
    computed: {
      user () {
        return userManagerStore.state.nowUser
      },
      unit () {
        return userManagerStore.state.nowUnit
      },
      allRightList () {
        return userManagerStore.state.allRightDatas
      },
      menuRightList () {
        // console.log("WEB菜单",userManagerStore.state.allRightDatas.menuRight);
        return userManagerStore.state.allRightDatas.menuRight
      },
      appRightList () {
        // console.log("APP菜单",userManagerStore.state.allRightDatas.appRight);
        return userManagerStore.state.allRightDatas.appRight
      },
      miniRightList () {
        var data=userManagerStore.state.allRightDatas.miniRight
        // console.log("小程序",data);
        // this.recurMiniRightList = this.recursiveFunction_fn(data)
        // console.log("转化后",this.recurMiniRightList);
        return data
      },


      // nowMenuCheckedIds() {
      // 	return userManagerStore.state.nowUserMenuRightIds
      // },
      // nowAppCheckedIds() {
      // 	return userManagerStore.state.nowUserAppRightIds
      // },
      nowMenuCheckedIds: {
        get: function() {
          return userManagerStore.state.nowUserMenuRightIds
        },
        set: function(newValue) {
          return userManagerStore.state.nowUserMenuRightIds=newValue
        }
      },
      nowAppCheckedIds: {
        get: function() {
          return userManagerStore.state.nowUserAppRightIds
        },
        set: function(newValue) {
          return userManagerStore.state.nowUserAppRightIds=newValue
        }
      },
      nowMiniCheckedIds: {
        get: function() {
          return userManagerStore.state.nowUserMiniRightIds
        },
        set: function(newValue) {
          return userManagerStore.state.nowUserMiniRightIds=newValue
        }
      },
      editDisableMenuList () {
        return userManagerStore.state.editDisableMenuList
      },
      editDisableAppList () {
        return userManagerStore.state.editDisableAppList
      },
      editDisableMiniList () {
        return userManagerStore.state.editDisableMiniList
      },
      userRolesRights () {
        return userManagerStore.state.nowUserRolesRights
      },
      a () {
        return "维度电气"
      },
      needSave () {
        var resultMenu=false
        var resultApp=false

        if(isempty(this.menuRightList)) {
          resultMenu=false
        } else {
          var menuRight=[]
          var menuKeys=Object.keys(this.$refs.menuSelection.nowSelectIds)
          for(let i=0;i<menuKeys.length;i++) {
            if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]) {
              menuRight.push(menuKeys[i])
            }
          }

          if(this.nowMenuCheckedIds.length==menuRight.length) {
            for(let i=0;i<menuRight.length;i++) {
              if(this.nowMenuCheckedIds.indexOf(menuRight[i])<0) {
                resultMenu=true
                break
              }
            }
          } else {
            resultMenu=true
          }
        }

        if(isempty(this.appRightList)) {
          resultApp=false
        } else {
          var appRight=[]
          var appKeys=Object.keys(this.$refs.appSelection.nowSelectIds)
          for(let i=0;i<appKeys.length;i++) {
            if(this.$refs.appSelection.nowSelectIds[appKeys[i]]) {
              appRight.push(appRight[i])
            }
          }
          if(this.nowAppCheckedIds.length==appRight.length) {
            for(let i=0;i<appRight.length;i++) {
              if(this.nowAppCheckedIds.indexOf(appRight[i])<0) {
                resultApp=true
                break
              }
            }
          } else {
            resultApp=true
          }
        }
        // console.log("resultMenu",!resultMenu);
        // console.log("resultApp",!resultApp);
        if(!resultMenu&&!resultApp) {
          return false
        } else {
          return true
        }
      }
    },
    watch: {
      nowMenuCheckedIds (nv,ov) {
        this.resetDatas()
      }
    },
    methods: {
      recursiveFunction_fn (data) {
        if(data!=undefined) {


          var arr=[]
          var recursiveFunction=function() {
            const getStr=function(list) {
              list.forEach(function(row) {
                if(row.next.length!=0) {
                  // console.log("row.ChildDatas",row);
                  arr.push(row)
                  getStr(row.next)
                } else {
                  // console.log("row.ChildDatas1234",row);
                  // str += row.Content.Name + ";"
                  arr.push(row)
                }
              })
            }
            getStr(data)
          }
          recursiveFunction()
          return arr
        }
      },
      resetDatas () {
        this.$refs.menuSelection.setNowCheckedIds(this.nowMenuCheckedIds)
        this.$refs.appSelection.setNowCheckedIds(this.nowAppCheckedIds)
        this.$refs.miniSelection.setNowCheckedIds(this.nowMiniCheckedIds)
        this.$refs.menuSelection.setEditDisableList(this.editDisableMenuList)
        this.$refs.appSelection.setEditDisableList(this.editDisableAppList)
        this.$refs.miniSelection.setEditDisableList(this.editDisableMiniList)
      },
      saveEdit () {
        // if(!this.needSave){
        // 	return
        // }
        var menuRight=[]
        var menuKeys=Object.keys(this.$refs.menuSelection.nowSelectIds)
        for(let i=0;i<menuKeys.length;i++) {
          if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]) {
            menuRight.push(menuKeys[i])
          }
        }
        var appRight=[]
        var appKeys=Object.keys(this.$refs.appSelection.nowSelectIds)
        for(let i=0;i<appKeys.length;i++) {
          if(this.$refs.appSelection.nowSelectIds[appKeys[i]]) {
            appRight.push(appRight[i])
          }
        }

        var miniRight=[]
        var miniKeys=Object.keys(this.$refs.miniSelection.nowSelectIds)
        for(let i=0;i<miniKeys.length;i++) {
          if(this.$refs.miniSelection.nowSelectIds[miniKeys[i]]) {
            miniRight.push(miniKeys[i])
          }
        }
        var rightArr=menuRight.concat(appRight,miniRight)
        var rightIds=rightArr.join(',')
        this.$api.userApi.bindUserAndRight(this.user.id,rightIds,res => {
          this.$dialogMethod.showMessage(res)
          this.$store.menuStore.commit("getMenuList")
          this.resetCheckedIds()
        },failure => {
          this.$dialogMethod.showMessage(failure)
        })
      },
      resetCheckedIds () {
        var webRight=[]
        var menuKeys=Object.keys(this.$refs.menuSelection.nowSelectIds)
        for(let i=0;i<menuKeys.length;i++) {
          if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]) {
            webRight.push(menuKeys[i])
          }
        }
        var appRight=[]
        var appKeys=Object.keys(this.$refs.appSelection.nowSelectIds)
        for(let i=0;i<appKeys.length;i++) {
          if(this.$refs.appSelection.nowSelectIds[appKeys[i]]) {
            appRight.push(appKeys[i])
          }
        }

        var miniRight=[]
        var miniKeys=Object.keys(this.$refs.miniSelection.nowSelectIds)
        for(let i=0;i<miniKeys.length;i++) {
          if(this.$refs.miniSelection.nowSelectIds[miniKeys[i]]) {
            miniRight.push(miniKeys[i])
          }
        }
        this.nowMenuCheckedIds=webRight
        this.nowAppCheckedIds=appRight
        this.nowMiniCheckedIds=miniRight
      },
      coverCheckedIds () {
        this.$refs.menuSelection.setNowCheckedIds(this.nowMenuCheckedIds)
        this.$refs.appSelection.setNowCheckedIds(this.nowAppCheckedIds)
        this.$refs.miniSelection.setNowCheckedIds(this.nowMiniCheckedIds)
      }
    }
  }
</script>

<style>
  .jurisdictionItem {
    border: solid 1px #E4E4E4;
    height: 99%;
    /* border: 0px !important; */
    box-sizing: border-box;
    float: left;
    margin-right: 30px;
    width: calc(32% - 15px) !important;
  }

  .jurisdictionItem:last-child {
    margin-right: 0;
  }

  .jurisdictionItem .list-body {
    border: none;
  }

  .jurisdictionTitle {
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    /* background: #E3E7EC; */
    /* text-align: center; */
    background-color: #F3F8FF !important;
    line-height: 44px;
    padding-left: 12px;
    font-weight: bold;

  }
</style>